import React, { useEffect, useState } from 'react';
import Highcharts from 'highcharts/highstock';
import HighchartsReact from 'highcharts-react-official';
import axios from 'axios';

const StockChart = () => {
  const [chartOptions, setChartOptions] = useState({});

  useEffect(() => {
    // Highcharts全局设置
    Highcharts.setOptions({
      lang: {
        rangeSelectorZoom: ''
      }
    });

    // 数据获取与处理
    axios.get('https://data.jianshukeji.com/stock/history/000001')
      .then(response => {
        const data = response.data;
        if (data.code !== 1) {
          alert('读取股票数据失败！');
          return;
        }
        let ohlc = [], volume = [];
        data.data.forEach((item, index) => {
          ohlc.push([
            item[0], // 日期
            item[1], // 开盘
            item[2], // 最高
            item[3], // 最低
            item[4]  // 收盘
          ]);
          volume.push([
            item[0], // 日期
            item[5]  // 成交量
          ]);
        });

        // 图表配置
        setChartOptions({
          rangeSelector: {
            selected: 1,
            inputDateFormat: '%Y-%m-%d'
          },
          title: {
            text: '平安银行历史股价'
          },
          xAxis: {
            dateTimeLabelFormats: {
              millisecond: '%H:%M:%S.%L',
              second: '%H:%M:%S',
              minute: '%H:%M',
              hour: '%H:%M',
              day: '%m-%d',
              week: '%m-%d',
              month: '%y-%m',
              year: '%Y'
            }
          },
          tooltip: {
            split: false,
            shared: true,
          },
          yAxis: [{
            labels: {
              align: 'right',
              x: -3
            },
            title: {
              text: '股价'
            },
            height: '65%',
            resize: {
              enabled: true
            },
            lineWidth: 2
          }, {
            labels: {
              align: 'right',
              x: -3
            },
            title: {
              text: '成交量'
            },
            top: '65%',
            height: '35%',
            offset: 0,
            lineWidth: 2
          }],
          series: [{
            type: 'candlestick',
            name: '平安银行',
            color: 'green',  // 跌时的颜色
            lineColor: 'green',
            upColor: 'red',  // 涨时的颜色
            upLineColor: 'red',
            data: ohlc,
            id: 'sz'
          }, {
            type: 'column',
            name: '成交量',
            data: volume,
            yAxis: 1
          }]
        });
      })
      .catch(error => {
        console.error('Error fetching stock data:', error);
      });
  }, []);

  return (
    <HighchartsReact
      highcharts={Highcharts}
      constructorType={'stockChart'}
      options={chartOptions}
    />
  );
};

export default StockChart;

























// import Highcharts from 'highcharts/highstock';

// // 如果你还需要引入额外的模块，如 indicators
// require('highcharts/indicators/indicators')(Highcharts);
// require('highcharts/indicators/pivot-points')(Highcharts);
// require('highcharts/indicators/macd')(Highcharts);
// require('highcharts/indicators/moving-average')(Highcharts);

// const createStockChart = (containerId) => {
//     Highcharts.stockChart(containerId, {
//         chart: {
//             alignTicks: false
//         },
//         rangeSelector: {
//             selected: 1
//         },
//         title: {
//             text: '股票 K 线图'
//         },
//         yAxis: [{
//             labels: {
//                 align: 'right',
//                 x: -3
//             },
//             title: {
//                 text: 'OHLC'
//             },
//             height: '60%',
//             lineWidth: 2,
//             resize: {
//                 enabled: true
//             }
//         }, {
//             labels: {
//                 align: 'right',
//                 x: -3
//             },
//             title: {
//                 text: 'MACD'
//             },
//             top: '65%',
//             height: '35%',
//             offset: 0,
//             lineWidth: 2
//         }],
//         tooltip: {
//             split: true
//         },
//         series: [{
//             type: 'candlestick',
//             name: 'AAPL',
//             data: [
//                 [Date.UTC(2023, 4, 1), 2300, 2302.6, 2287.3, 2302.94],
//                 [Date.UTC(2023, 4, 2), 2300, 2301.3, 2291.26, 2308.38],
//                 [Date.UTC(2023, 4, 3), 2305.35, 2346.5, 2295.35, 2346.92],
//                 [Date.UTC(2023, 4, 4), 2347.22, 2358.98, 2337.35, 2363.8],
//                 [Date.UTC(2023, 4, 5), 2360.75, 2382.48, 2357.35, 2385.42]
//             ],
//             id: 'aapl'
//         }, {
//             type: 'macd',
//             yAxis: 1,
//             linkedTo: 'aapl'
//         }, {
//             type: 'sma',
//             linkedTo: 'aapl',
//             zIndex: 1,
//             params: {
//                 period: 5
//             }
//         }, {
//             type: 'sma',
//             linkedTo: 'aapl',
//             zIndex: 1,
//             params: {
//                 period: 10
//             }
//         }, {
//             type: 'sma',
//             linkedTo: 'aapl',
//             zIndex: 1,
//             params: {
//                 period: 20
//             }
//         }, {
//             type: 'sma',
//             linkedTo: 'aapl',
//             zIndex: 1,
//             params: {
//                 period: 30
//             }
//         }]
//     });
// };

// export default createStockChart;




// import React, { useEffect, useRef } from 'react';
// import Highcharts from 'highcharts/highstock';
// import Indicators from 'highcharts/indicators/indicators';
// import MACD from 'highcharts/indicators/macd';


// // 初始化技术指标和MACD指标
// Indicators(Highcharts);
// MACD(Highcharts);

// const StockChart = () => {
//   const chartRef = useRef(null);

//   useEffect(() => {
//     if (chartRef.current) {
//       Highcharts.stockChart(chartRef.current, {
//         chart: {
//           backgroundColor: 'white'
//         },

//         rangeSelector: {
//           selected: 1
//         },

//         title: {
//           text: 'AAPL Stock Price'
//         },

//         yAxis: [{
//           labels: {
//             align: 'right',
//             x: -3
//           },
//           title: {
//             text: 'OHLC'
//           },
//           height: '60%',
//           lineWidth: 2,
//           resize: {
//             enabled: true
//           }
//         }, {
//           labels: {
//             align: 'right',
//             x: -3
//           },
//           title: {
//             text: 'MACD'
//           },
//           top: '65%',
//           height: '35%',
//           offset: 0,
//           lineWidth: 2
//         }],

//         series: [{
//           type: 'candlestick',
//           name: 'AAPL',
//           data: [
//             [Date.UTC(2023, 5, 1), 10, 16, 9, 15],
//             [Date.UTC(2023, 5, 2), 15, 22, 14, 20],
//             [Date.UTC(2023, 5, 3), 20, 23, 16, 18],
//             [Date.UTC(2023, 5, 4), 18, 20, 16, 17],
//             [Date.UTC(2023, 5, 5), 17, 22, 15, 21]
//           ],
//           color: 'red',  // 默认涨的颜色
//           upColor: 'green',  // 跌的颜色
//           tooltip: {
//             valueDecimals: 2
//           }
//         }, {
//           type: 'sma',
//           linkedTo: 'aapl',
//           name: 'MA5',
//           params: {
//             period: 5
//           }
//         }, {
//           type: 'sma',
//           linkedTo: 'aapl',
//           name: 'MA10',
//           params: {
//             period: 10
//           }
//         }, {
//           type: 'sma',
//           linkedTo: 'aapl',
//           name: 'MA20',
//           params: {
//             period: 20
//           }
//         }, {
//           type: 'sma',
//           linkedTo: 'aapl',
//           name: 'MA30',
//           params: {
//             period: 30
//           }
//         }, {
//           type: 'macd',
//           yAxis: 1,
//           linkedTo: 'aapl',
//           params: {
//             shortPeriod: 12,
//             longPeriod: 26,
//             signalPeriod: 9,
//             period: 26
//           }
//         }]
//       });
//     }
//   }, []);

//   return <div ref={chartRef} style={{ height: '100%', minWidth: '310px' }}></div>;
// };

// export default StockChart;



// import React, { useEffect, useRef } from 'react';
// import Highcharts from 'highcharts/highstock';

// const StockChart = () => {
//   const chartRef = useRef(null);

//   useEffect(() => {
//     if (chartRef.current) {
//       Highcharts.stockChart(chartRef.current, {
//         rangeSelector: {
//           selected: 1
//         },
//         title: {
//           text: 'AAPL Stock Price'
//         },
//         series: [{
//           type: 'candlestick',
//           name: 'AAPL',
//           data: [
//             [Date.UTC(2023, 5, 1), 10, 16, 9, 15],
//             [Date.UTC(2023, 5, 2), 15, 22, 14, 20],
//             [Date.UTC(2023, 5, 3), 20, 23, 16, 18],
//             [Date.UTC(2023, 5, 4), 18, 20, 16, 17],
//             [Date.UTC(2023, 5, 5), 17, 22, 15, 21]
//           ],
//           tooltip: {
//             valueDecimals: 2
//           }
//         }]
//       });
//     }
//   }, []);

//   return <div ref={chartRef} style={{ height: '100%', minWidth: '310px' }}></div>;
// };

// export default StockChart;






//import React, { useState, useEffect } from 'react';

// const DemoStock = () => {
//   const [Stock, setStock] = useState(null); // 用于存储动态加载的Stock组件

//   useEffect(() => {
//     import('@ant-design/plots').then(module => {
//       setStock(() => module.Stock); // 加载完成后设置Stock
//     }).catch(error => {
//       console.error('Failed to load @ant-design/plots', error);
//     });
//   }, []);

//   const data = [
//     { "date": "2023-05-01", "open": 230, "close": 250, "high": 255, "low": 225 },
//     { "date": "2023-05-02", "open": 250, "close": 243, "high": 253, "low": 232 },
//     { "date": "2023-05-03", "open": 225, "close": 244, "high": 215, "low": 200 },
//     { "date": "2023-05-04", "open": 223, "close": 245, "high": 221, "low": 215 },
//     { "date": "2023-05-05", "open": 246, "close": 246, "high": 273, "low": 250 },
//     { "date": "2023-05-06", "open": 242, "close": 247, "high": 227, "low": 214 },
//     { "date": "2023-05-07", "open": 234, "close": 248, "high": 225, "low": 213 },
//     { "date": "2023-05-08", "open": 226, "close": 249, "high": 236, "low": 225 },
//     { "date": "2023-05-09", "open": 274, "close": 250, "high": 271, "low": 246 },
//   ];

//   // 这里可以添加一个计算均线的逻辑，例如计算收盘价的均线
//   const lineData = data.map(item => ({
//     date: item.date,
//     value: (item.open + item.close + item.high + item.low) / 4, // 简单均线计算示例
//   }));

//   const config = {
//     data,
//     xField: 'date',
//     yField: ['open', 'close', 'high', 'low'],
//     interactions: [{ type: 'tooltip', cfg: { start: ['hover:stock'] } }],
//     appendPadding: 30,
//     meta: {
//       date: { range: [0, 1] },
//     },
//     yAxis: {
//       label: {
//         formatter: val => `${val} ¥`,
//       },
//     },
//     plots: [
//       {
//         type: 'line',
//         options: {
//           data: lineData,
//           xField: 'date',
//           yField: 'value',
//           color: '#FAAD14', // 折线图颜色
//         },
//       },
//     ],
//   };

//   if (!Stock) {
//     return <div>Loading...</div>;
//   }

//   return <Stock {...config} />;
// };

// export default DemoStock;





